<template>
	<view class="page_wrap">
		<custom-header :title="title" sticky />
		<!-- Tab切换 -->
		<view class="tab-bar">
			<view class="tab-item" :class="{ active: activeTab === '1' }" @click="switchTab('1')">
				<image v-if="activeTab == '1'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">待配货({{ tabCounts.peihuo1 }})</text>
			</view>
			<view class="tab-item" :class="{ active: activeTab === '2' }" @click="switchTab('2')">
				<image v-if="activeTab == '2'" class="tab-icon" src="/static/home/xzlk.png" mode="aspectFit" />
				<text class="tab-text">已配货({{ tabCounts.peihuo2 }})</text>
			</view>
		</view>
		<!-- 数据列表 -->
		<view class="_wrap">
			<view
				class="no_data" 
				v-if="!listData.length && listLoading != 'loading'">
					<view class="text">暂无数据</view>
			</view>
			<!-- 表格区域 -->
			<view class="table-section" v-else-if="listData.length">
				<!-- 表头 -->
				<view class="table-header">
					<text class="header-cell flower-cell">花材</text>
					<text class="header-cell number-cell">配货数/总数</text>
					<text class="header-cell record-cell">质检记录</text>
					<text class="header-cell operation-cell">操作</text>
				</view>
			
				<!-- 数据行 -->
				<view class="table-body">
					<view class="table-row" v-for="(item, index) in listData" :key="index">
						<view class="table-cell flower-cell">
							<view class="supplier-info">
								<text class="supplier-name">{{ item.supplierName }}</text>
								<text class="replace">{{ item.replace }}</text>
							</view>
							<view class="flower-info">
								<text class="flower-name">{{ item.flowerName }}</text>
								<text class="grade">{{ item.grade }}</text>
							</view>
						</view>
						<text class="table-cell number-cell" @click="handleSetNumber(item)">
							{{ item.number }}/{{ item.maxNumber }}
						</text>
						<view class="table-cell record-cell">
							<block v-if="item.stockoutNumber || item.demotionNumber">
								<view>缺货{{item.stockoutNumber}}扎</view>
								<view>降级{{item.demotionNumber}}扎</view>
							</block>
							<block v-else>无</block>
						</view>
						<view class="table-cell operation-cell" @click="handleDetail(item)">
							<view class="pending" v-if="activeTab == '1'">
								详情 <up-icon name="arrow-right" size="22rpx" color="#666666"></up-icon>
							</view>
							<view class="approved" v-if="activeTab == '2'">
								详情 <up-icon name="arrow-right" size="22rpx" color="#30C8AE"></up-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loading_wrap" v-if="listLoading == 'loading'">
				<up-loadmore 
					:status="listLoading" 
					iconSize="22"
					iconColor="#F5564D"  
					loadingIcon='semicircle'
					loadingText="" />
			</view>
		</view>
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
	</view>
</template>

<script setup>
	import { ref,reactive,computed,onMounted } from 'vue'
	import { objectToQueryString } from '../../utils/util.js'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认
	const confirmToast = (data)=>{
		console.log(data)
		// 选择配货数量
		if(data?.type == 'setNumber'){
			hideToast()
		}else{
			hideToast()
		}
	}
	
	
	
	// 标题
	const title = ref('')
	// 当前激活的Tab
	const activeTab = ref('1')
	// Tab统计数据
	const tabCounts = reactive({
		peihuo1:888,
		peihuo2:999
	})
	// 切换Tab
	const switchTab = (tab) => {
		activeTab.value = tab
		loadGetListData()
	}
	
	// 列表数据
	const listData = ref([])
	const listLoading = ref('loadmore')
	const loadGetListData = () => {
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(() => {
			listLoading.value = 'loadmore'
			// 待配货
			if(activeTab.value == 1){
				listData.value = [
					{
						flowerName:'蜜桃雪山蜜桃雪山蜜桃雪山蜜桃雪山(香槟)',
						grade:'A级',
						supplierName:'富旺花卉',
						replace:'斗南', 
						stockoutNumber:0, // 缺货
						demotionNumber:0, // 降级
						number:53,
						maxNumber:99,
						status:0,  //已配货
					},
					{
						flowerName:'蜜桃雪山(香槟)',
						grade:'A级',
						supplierName:'富旺花卉',
						replace:'代配', 
						stockoutNumber:0, // 缺货
						demotionNumber:0, // 降级
						number:25,
						maxNumber:70,
						status:0,  //已配货
					},
					{
						flowerName:'蜜桃雪山(香槟)',
						grade:'A级',
						supplierName:'富旺花卉',
						replace:'代配', 
						stockoutNumber:0, // 缺货
						demotionNumber:0, // 降级
						number:66,
						maxNumber:88,
						status:0,  //已配货
					}
				]
			}
			// 已配货
			else if(activeTab.value == 2){
				listData.value = [
					{
						flowerName:'蜜桃雪山蜜222(香槟)',
						grade:'A级',
						supplierName:'富旺花卉',
						replace:'斗南', 
						stockoutNumber:1, // 缺货
						demotionNumber:0, // 降级
						number:53,
						maxNumber:99,
						status:1,  //已配货
					},
					{
						flowerName:'22蜜桃雪山(香槟)',
						grade:'A级',
						supplierName:'富旺花卉',
						replace:'代配', 
						stockoutNumber:0, // 缺货
						demotionNumber:1, // 降级
						number:25,
						maxNumber:70,
						status:1,  //已配货
					},
					{
						flowerName:'33蜜桃雪山(香槟)',
						grade:'A级',
						supplierName:'富旺花卉',
						replace:'代配', 
						stockoutNumber:5, // 缺货
						demotionNumber:5, // 降级
						number:66,
						maxNumber:88,
						status:1,  //已配货
					}
				]
			}
			
		}, 500)
	}
	// 详情
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:`/pages/distributionFlowerDetail/distributionFlowerDetail?${objectToQueryString({
				...item,
				title:title.value
			})}`
		})
	}
	// 选择配货数量
	const handleSetNumber = (item)=>{
		const max = item.maxNumber - item.number
		const maxHintText = `最大可配${max}扎`
		showToast({
			title:'请选择配货数量',
			isNumberInput:true,
			showCancel:true,
			max,
			maxHintText,
			data:{
				type:'setNumber'
			}
		})
	}
	
	onMounted(() => {
	  // 获取页面参数
	  const pages = getCurrentPages()
	  const currentPage = pages[pages.length - 1]
	  const options = currentPage.options
	  console.log(options)
	  title.value = options.name
	  
	  loadGetListData()
	})
</script>

<style lang="scss">
	.page_wrap{
		min-height: 100vh;
		background-color: #fff;
	}
	// Tab栏
	.tab-bar {
		background: #ffffff;
		display: flex;
		.tab-item {
			flex: 1;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
	
			.tab-icon {
				width: 27.5rpx;
				height: 25rpx;
				transform: translateX(10rpx) translateY(-16rpx);
			}
	
			.tab-text {
				font-size: 28rpx;
				color: #999;
			}
	
			.tab-indicator {
				position: absolute;
				bottom: 0;
				width: 60rpx;
				height: 4rpx;
				background: #f5564d;
				border-radius: 2rpx;
			}
	
			&.active .tab-text {
				color: #333;
				font-weight: 600;
			}
		}
	}
	.no_data{
		padding-top: 100rpx;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	// 表格区域
	.table-section {
		.table-header {
			padding: 0 24rpx;
			display: flex;
			background: #F5F7F9;
			height: 67rpx;
			align-items: center;
			border-radius: 12rpx;
			.header-cell {
				font-size: 24rpx;
				color: #333333;
				font-weight: 600;
	
				&.flower-cell {
					flex: 2.5;
					text-align: center;
				}
	
				&.number-cell {
					flex: 1.5;
					text-align: center;
				}
	
				&.record-cell {
					flex: 1.5;
					text-align: center;
				}
	
				&.operation-cell {
					flex: 0.8;
				}
			}
		}
	
		.table-body {
			padding: 0 24rpx;
			margin-top: 12rpx;
			.table-row {
				display: flex;
				align-items: center;
				padding: 24rpx 0;
				border-bottom: 1rpx solid #F2F2F2;
				position: relative;
	
				&:last-child {
					border-bottom: none;
				}
				// &:active {
				// 	background-color: #f1f1f1;
				// }
	
				.table-cell {
					font-size: 24rpx;
					color: #666666;
					&.flower-cell {
						flex: 2.5;
						.supplier-info{
							width: 250rpx;
							display: flex;
							.supplier-name {
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}
							.replace{
								display: inline-block;
								width: 64rpx;
								text-align: center;
								height: 32rpx;
								line-height: 32rpx;
								border-radius: 6rpx;
								border: 1px solid #5786FF;
								color: #5786FF;
								font-size: 22rpx;
								margin-left: 10rpx;
							}
						}
						.flower-info{
							white-space: nowrap;
							overflow: hidden;
							padding-top: 12rpx;
							display: flex;
							width: 250rpx;
							.flower-name {
								color: #333;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
								min-width: 0;
							}
							.grade {
								color: #F5564D;
								font-size: 24rpx;
								flex-shrink: 0;
								min-width: 50rpx;
								margin-left: 10rpx;
							}
						}
					}
	
					&.number-cell {
						flex: 1.5;
						text-align: center;
					}
	
					&.record-cell {
						flex: 1.5;
						text-align: center;
					}
	
					&.operation-cell {
						flex: 0.8;
	
						.pending {
							display: flex;
						}
	
						.approved {
							color: #30C8AE;
							display: flex;
						}
					}
				}
			}
		}
	}
</style>
